import React from 'react';
import { Form, Input, InputNumber, Button, message, Select, Modal, Switch } from 'antd';
import {
    ExclamationCircleOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';

const { confirm } = Modal;

@connect(({ user, CrudModel, UserModule }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    UserModule,
}))
class MyModuleEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            datas: {},
            modlist: [],
        }
    }
    formRef = React.createRef();
    componentDidMount() {
        const { UserModule } = this.props;
        if (UserModule.current.id) {
            this.getData(UserModule.current.id);
        }
        this.fetchModuls();
    }
    getData = (id) => {
        const { dispatch } = this.props;
        if (id > 0) {
            dispatch({
                type: 'CrudModel/get',
                payload: { id },
                control: 'UserModule',
            }).then(() => {
                var result = this.props.response.result;
                result.contents = decodeURI(result.contents);
                this.setState({ datas: result });
                this.formRef.current.setFieldsValue({ article: result });
            });
        }
    }
    fetchModuls = () => {
        this.props.dispatch({
            type: "CrudModel/getAll",
            payload: { SkipCount: 0, MaxResultCount: 1000 },
            control: 'Module',
        }).then(() => {
            var resp = this.props.response.result;
            if (resp) {
                var modlist = resp.items;
                this.setState({ loading: false, modlist });
            }
        });
    }
    onFinish = (values) => {
        var act = "CrudModel/create";
        if (values.article.id > 0) {
            act = "CrudModel/update";
        }
        values.article.contents = encodeURI(values.article.contents);
        this.props.dispatch({
            type: act,
            payload: values.article,
            control: 'UserModule',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('保存成功！');
                this.props.switchModal(false);
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    };
    ResetForm = () => {
        var data = {
            id: 0,
        }
        this.setState({ datas: data });
        this.formRef.current.resetFields();
    }
    handleDel = () => {
        this.props.dispatch({
            type: "CrudModel/delete",
            payload: { Id: this.state.datas.id },//this.props.response.id
            control: 'UserModule',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('删除成功！');
                this.props.fetchDatas();
                this.formRef.current.resetFields();
            }
            else {
                message.error('删除错误，请联系管理员！');
            }
        })
    }
    showConfirm = () => {
        var _this = this;
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.handleDel();
            },
            onCancel() { },
        });
    }
    onChange = (option) => {
        const { datas, modlist } = this.state;
        datas.displayName=option.children;
        console.log(option.children)
        //this.formRef.current.setFieldsValue({ article: datas });
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 18 },
        };
        const { datas, modlist } = this.state;
        return (
            <div>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <div style={{ display: 'none' }}>
                        <Form.Item
                            label="id"
                            name={['article', 'id']}>
                            <Input />
                        </Form.Item>
                    </div>
                    <Form.Item
                        label="选择应用"
                        name={['article', 'moduleId']}>
                        <Select
                            showSearch
                            placeholder="请选择应用"
                            onChange={this.onChange}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            {
                                modlist.map(element => {
                                    return (
                                        <Select.Option key={element.id} value={element.id}>{element.moduleName}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name={['article', 'displayName']}
                        label="显示名称">
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['article', 'authUser']}
                        label="授权用户">
                        <Input />
                    </Form.Item>
                    <Form.Item name={['article', 'authPassword']} label="授权密码" >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        name={['article', 'modulePath']}
                        label="应用地址">
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['article', 'orderId']}
                        label="排序">
                        <InputNumber />
                    </Form.Item>
                    <Form.Item
                        name={['article', 'isTop']}
                        label="放置首页" valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 5 }}>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={this.state.loading}
                        >保存</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default MyModuleEdit;